<template>
  <div id="person">
    <!-- 个人中心 -->
    <div class="main">
        <div class="top">
            <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>个人中心</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 头像 -->
        <div class="avatar">
            <el-avatar shape="raidus" size="100px" :src="url"></el-avatar>
        </div>
      <div class="frorm">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="form.number"></el-input>
          </el-form-item>
          <!-- 账号状态 0正常 1异常 -->
          <el-form-item label="账号状态">
            <el-radio-group v-model="form.status">
              <el-radio label="正常"></el-radio>
              <el-radio label="禁用"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item style="margin-right: 166px">
            <el-button type="primary" @click="onSubmit">修改</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
      
      <script>
import { onMounted } from "vue";

export default {
  name: "person",
  components: {},
  data() {
    return {
      url:"",
      form: {
        username: "",
        email: "",
        date: "",
        status: "",
        number: "",
        password: "",
        adddress: "",
      },
    };
  },
  methods: {
    onSubmit() {
        this.$http.put("/api/sysUser/updateStatus", this.form).then((res) => {
            if (res.data.code == 200) {
            this.$message({
                message: "修改成功",
                type: "success",
            });
            this.$http.get("/api/sysUser/detail").then((res) => {
        if (res.data.data != null) {
            this.form = res.data.data;
            this.url = 'http://localhost:8585/uploads/ +' + res.data.data.avatar;


        }
        console.log(res.data.data);
        
      });
            } else {
            this.$message({
                message: "修改失败",
                type: "error",
            });
            }
        });
    },    
  },
  mounted() {
    // 获取用户信息
    this.$http.get("/api/sysUser/detail").then((res) => {
        if (res.data.data != null) {
            this.form = res.data.data;
            this.url = 'http://localhost:8585/uploads/' + res.data.data.avatar;
            console.log(this.url);
            
        }
        console.log(res.data.data);
        
      });
  },
};
</script>
      
      
      
      
      
  <style lang="less" scoped>
#person {
  .main {
    margin-left: 20px;
    margin-right: 20px;
    margin: auto;
    width: 600px;
    height: 100%;
    .top {
      margin-top: 20px;
    }
    .avatar {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    
  }
}
</style>3